<template>
  <div class="blog-detail">
    <!-- 文章标题 -->
    <h1 class="post-title">{{ post.title }}</h1>

    <!-- 文章元信息 -->
    <div class="post-meta">
      <span class="author">作者：{{ post.author }}</span>
      <span class="date">发布日期：{{ post.date }}</span>
      <span class="category">分类：{{ post.category }}</span>
    </div>

    <!-- 文章正文 -->
    <div class="post-body">
      <p v-for="(paragraph, index) in post.body" :key="index">
        {{ paragraph }}
      </p>
    </div>

    <!-- 文章操作按钮 -->
    <div class="post-actions">
      <button @click="goToPrev" class="action-button prev-button">上一篇</button>
      <button @click="likePost" class="action-button like-button">点赞</button>
      <button @click="collectPost" class="action-button collect-button">收藏</button>
      <button @click="goToNext" class="action-button next-button">下一篇</button>
    </div>
  </div>
</template>

<script setup>
// 定义 props，接收文章数据
const props = defineProps({
  post: {
    type: Object,
    required: true,
  },
});

// 点赞文章
const likePost = () => {
  console.log('点赞文章');
};

// 收藏文章
const collectPost = () => {
  console.log('收藏文章');
};

// 上一篇
const goToPrev = () => {
  console.log('跳转到上一篇');
};

// 下一篇
const goToNext = () => {
  console.log('跳转到下一篇');
};
</script>

<style scoped>
.blog-detail {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.post-title {
  font-size: 2.5rem;
  color: #1a73e8;
  margin-bottom: 20px;
  text-align: center;
}

.post-meta {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 20px;
  font-size: 0.9rem;
}

.post-meta .author {
  color: #e91e63; /* 作者颜色 */
}

.post-meta .date {
  color: #4caf50; /* 发布日期颜色 */
}

.post-meta .category {
  color: #ff9800; /* 分类颜色 */
}

.post-body {
  font-size: 1.1rem;
  line-height: 1.8;
  color: #333;
  margin-bottom: 40px;
}

.post-body p {
  margin-bottom: 20px;
}

.post-actions {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 40px;
}

.action-button {
  padding: 12px 24px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.action-button:hover {
  transform: translateY(-2px);
}

.prev-button {
  background-color: #9c27b0; /* 上一篇按钮颜色 */
  color: white;
}

.like-button {
  background-color: #f44336; /* 点赞按钮颜色 */
  color: white;
}

.collect-button {
  background-color: #ffeb3b; /* 收藏按钮颜色 */
  color: #333;
}

.next-button {
  background-color: #2196f3; /* 下一篇按钮颜色 */
  color: white;
}
</style>